<div id="content">

  <div class="row">
    <sa-big-breadcrumbs [items]="['Forms', 'Bootstrap Form Validation']" icon="pencil-square-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    <sa-stats></sa-stats>
  </div>

  <!--
      The ID "widget-grid" will start to initialize all widgets below
      You do not need to use widgets if you dont want to. Simply remove
      the <section></section> and you can use wells or panels instead
      -->

  <!-- widget grid -->
  <sa-widgets-grid>

    <!-- row -->
    <div class="row">

      <!-- NEW WIDGET ROW START -->
      <div class="col-sm-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#movieForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">

              <sa-movie-form></sa-movie-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#togglingForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">


              <sa-toggling-form></sa-toggling-form>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#attributeForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">

              <sa-attribute-form></sa-attribute-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </div>
      <!-- WIDGET ROW END -->

      <!-- NEW WIDGET ROW START -->
      <div class="col-sm-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#buttonGroupForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">


              <sa-button-group-form></sa-button-group-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#productForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">

              <sa-product-form></sa-product-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#profileForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">

              <sa-profile-form></sa-profile-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>#contactForm </h2>
          </header>

          <!-- widget div-->

          <div>


            <!-- widget content -->
            <div class="widget-body">


              <sa-contact-form></sa-contact-form>
            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->
      </div>
      <!-- WIDGET ROW END -->

    </div>

    <!-- end row -->

  </sa-widgets-grid>
  <!-- end widget grid -->

</div>
<!-- END MAIN CONTENT -->


